import {TinyPluginFactory} from "../tiny-plugin-factory";
import {Editor} from "tinymce";

export class PanelComponentCollection implements TinyPluginFactory {
  creat = (editor: Editor): void => {
    tinymce.PluginManager.add('panelComponentCollection', function (editor, url) {
      const openDialog = function () {
        // 打开一个窗口
        editor.windowManager.open({
          title: "collection panel component", // 必须有
          body: { // body 必须有
            type: 'panel', // body 的布局方式
            items: [{
              type: 'collection', // body 中的子组件类型
              name: 'results',
              /*
              组件的名字，这个名字很关键，collection 中会有很多数据集合，这些数据是通过 open()方法参数中的 initialData 传入的，
              而initialData 是一个普通的 json ,具体哪个 collection 使用 这个json 的 哪个属性？ 由这个name 值决定，比如，这个collection的
              name 值 是 results ,那么 他就会使用 initialData 中的 results 属性的值
              */
              /*
                collection 会根据 数据生成很多个按键 ，按键的click 会调用 onAction(dialogApi, actionData)方法， 第一个参数可以控制 窗口状态，
                第二个参数是一个json {name:"results",value:""} ,name的是 会是多个collection 中的一个的 name属性的值，value 指的是 点击的按键所对应的value
               */
              /*
              setData() 可以更新数据
               */
            }, {
              type: 'collection', // component type
              name: 'results2', // identifier
            }] // array of panel components
          },
          buttons: [
            {
              type: 'submit', // button type
              name: 'submitButton', // identifying name
              text: 'Submit', // text for the button
              // icon: 'checkmark', // will replace the text if configured
              disabled: false, // button is active when the dialog opens
              primary: true, // style the button as a primary button
              align: 'start' // align the button to the left of the dialog footer
            }
          ],
          initialData: {
            results: [{
              text: '第一个',
              value: 'value 1',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }, {
              text: '第二个',
              value: 'value 2',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }],
            results2: [
              {
                text: '第一个',
                value: 'value 1',
                icon: 'bold'
              }, {
                text: '第二个',
                value: 'value 2',
                icon: 'bold'
              }, {
                text: '第三个',
                value: 'value 3',
                icon: 'bold'
              }
            ]
          },
          onAction: function (dialogApi, actionData) {
            console.log(dialogApi);
            console.log(actionData);
            dialogApi.close();
          }
        })

      };

// 注册一个工具栏按钮名称
      editor.ui.registry.addButton('panelComponentCollection', {
        text: 'panel-component-collection',
        onAction: function (dialogApi, actionData) {
          openDialog();
        }
      });

// 注册一个菜单项名称 menu/menubar
      editor.ui.registry.addMenuItem('panelComponentCollection', {
        text: 'panel-component-collection',
        onAction: function () {
          openDialog();
        }
      });

      return {
        getMetadata: function () {
          return {
            //插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
            name: "panel-component",//插件名称
            url: "gitee.com/Z_xw", //作者网址
          };
        }
      };
    });
  };
}
